<ion-header class="ion-header">
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>{{ deviceName }}</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>
<ion-content>
    <ion-refresher (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="加载最新数据..."></ion-refresher-content>
    </ion-refresher>
    <div style="display:flex;flex-direction: column;height: 100%;">
        <!-- 房间内设备切换器 -->
        <nav-switch [navs]="deviceList" (navChange)="deviceChange($event, deviceList)"></nav-switch>
        <ion-grid>
            <ion-row>
                <ion-col col-3 class="leftParams">

                    <ion-card [ngStyle]="{display: parameter && parameter.values.length && parameter.isNull ? 'block' : 'none'}" *ngFor="let parameter of parameterGroup.parameterGroup_1;let index = index" (click)="showDeviceParamesHistoryDataCurv(parameter)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameter.name }} {{ parameter.unit }}</div>
                            <div class="parameter-value" [ngStyle]="{ color: v && v.hasAlarm?'#FF1919': '#25990e' }" *ngFor="let v of parameter.values">
                                {{ v.value }}
                            </div>
                        </ion-card-content>
                    </ion-card>
                </ion-col>
                <ion-col col-6 class="elevator-center">
                    <p><label *ngIf="imgType.isFloor === 3101 || imgType.isFloor === 3102" [ngStyle]="{ color:imgType.color }">{{ imgType.txt }}</label></p>
                    <div class="elevator-circle ">
                        <img [imgStateUrl]='imgType.Src' imgDefault="assets/imgs/gallery/SVG/10033.svg" />
                        <div class="elevator-img ">
                            <img *ngIf="imgType.src && imgType.isFloor === 3101 || imgType.src && imgType.isFloor === 3102" [src]="imgType.src" alt=" ">
                        </div>
                        <span *ngIf="imgType.isFloor === 3101 || imgType.isFloor === 3102" class="elevator-floor" (click)='showDeviceParamesHistoryDataCurv(parameterGroup_11)'>{{ floor || ' - ' }}<i>F</i></span>
                    </div>
                </ion-col>

                <ion-col style="text-align:right;" col-3 class="rightParams">

                    <ion-card [ngStyle]="{display: parameter && parameter.values.length > 0 && parameter.isNull ? 'block' : 'none'}" *ngFor="let parameter of parameterGroup.parameterGroup_2;let index = index" (click)="showDeviceParamesHistoryDataCurv(parameter)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameter.name }} {{ parameter.unit }}</div>
                            <div *ngIf="parameter.name !== '机房温湿度'">
                                <div class="parameter-value" *ngFor="let v of parameter.values" [ngStyle]="{ color: v && v.hasAlarm?'#FF1919': '#25990e' }">
                                    {{ v.value }}
                                </div>
                            </div>
                            <!-- 单独处理温湿度 -->
                            <div class="parameter-value" [ngStyle]="{ color: v && v.hasAlarm? '#FF1919': '#25990e' }" *ngIf="parameter.name === '机房温湿度' && parameter.values.length">
                                {{ parameter.values[0].value + '/' + parameter.values[1].value }}
                            </div>
                        </ion-card-content>
                    </ion-card>
                </ion-col>
            </ion-row>
        </ion-grid>

        <time-option [titles]="titles" [state]="state" (timeTypeChange)="onTimeTypeChange($event)"></time-option>

        <div echarts [options]="options" class="demo-chart"></div>

        <ion-row class="button-bar buttonThree-dt">
            <ion-col col-4 class="button" [ngClass]="{ chosen: b.state }" *ngFor="let b of buttonsData" (click)="toShowSubPage(b.id)">{{ b.name }}</ion-col>
        </ion-row>
    </div>

</ion-content>